<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>jQuery Showcase</title>
</head>
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.10.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		
		
		
		
		$('p').removeClass("red");
		$('p').css("color", "blue");
		$('.red').css("color", "red");
		$('#green').css("color", "green");
		$('div p').css("color", "yellow");
		$('div p').hide();

		$('#show').mouseover(function() {
			$(this).css({
				color : 'blue',
				'border-color' : 'blue',
				cursor : 'pointer'
			});

		});
		$('#show').mouseover(function() {
			$(this).css({
				color : 'black',
				'border-color' : 'white',
				cursor : 'pointer'
			});

		});

		$('#show').click(function() {
			$('p').toggle();
			$('#green').toggle();

			if ($('#green').is(':visible')) {
				$(this).val('Hide');
			} else {
				$(this).val('Show');
			}
		});

		$('p').each(function(i) {
			$(this).html("I am element # " + i);
		});
		
		$('p').mouseover(function() {
			$(this).css({
				color : 'black',
				cursor : 'pointer'
			});
		});
		$('p').mouseout(function() {
			$(this).css("color", "magenta");
		});

		$('table').css("color", "red");
		$('#tbTaz tr').mouseover(function() {
			$(this).css({
				'background-color' : '#D1E1FA',
				color : 'black',
				cursor : 'pointer'
			});
		});

		$('#tbTaz tr').mouseout(function() {
			$(this).css({
				'background-color' : 'white',
				cursor : 'pointer'
			});

		});
	});
</script>
<body>
	<p>Hello world</p>
	<div>I am outer div</div>
	<p class="red">I should be red.</p>
	<p class="red">I should be red.</p>
	<p class="red">I should be red.</p>
	<div id="green">Am I green?</div>
	<p>Am I yellow? I am an inner p.</p>
	<table id="tbTaz">
		<tr class="trA">
			<td class="tdA">Anant</td>
			<td class="tdB">Anar</td>
			<td class="tdA">Amy</td>
			<td class="tdB">Aroop</td>
		</tr>
		<tr class="trB">
			<td class="tdA">Jack</td>
			<td class="tdB">JeeYun</td>
			<td class="tdA">JunGyun</td>
			<td class="tdB">Joe</td>
		</tr>
		<tr class="trA">
			<td class="tdA">Parul</td>
			<td class="tdB">Peter</td>
			<td class="tdA">Palm</td>
			<td class="tdB">Prashanth</td>
		</tr>
	</table>
	<input id="show" type="button" value="Hide" />
</body>
</html>